<html>
<head>
<meta charset="utf-8">
<title>Vocabulary Add New</title>
<!-- jQuery Mobile references -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css" />
<script src="js/jquery-2.1.0.min.js"></script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>
<script src="js/knockout-min.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/localstorage.js"></script>
<script src="js/plugins/toast.js"></script>
<script type="text/javascript" src="js/lesson.js"></script>
<script type="text/javascript" src="js/vocabulary.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
    
<script type="text/javascript">
    var typeAdd;
    var lesson_id;
    
	$(document).ready(function() {
		//show lesson select menu
		selectLessonList();
		
		$( "#typeAdd" ).change(function() {
			  $( "#typeAdd option:selected" ).each(function() {
				  typeAdd = $( this ).attr('value');
			  });
			  
			  switch (typeAdd){
			  case 'kanji':
				  $("label[id=label_word]").text("Kanji");
				  $('#field-mean-kanji').css('display','block');
				  $('#field-hiragana').css('display','block');
				  $('#hiragana').attr('class','required');
				  break;
			  case 'katakana':
				  $("label[id=label_word]").text("Katakana");
				  $('#field-mean-kanji').css('display','none');
				  $('#field-hiragana').css('display','none');
				  $('#hiragana').attr('class','');
				  break;
			  }
		});
		
		//kiem tra xem co id khong. neu co -> update. khong co thi add
		var id = getUrlVars()["id"];
		if(id){
			editVocabulary(id);
		}
		
		//back button event
		$('#btnBack').click(function() {
			parent.history.back();
		});
		
		//bat su kien bam nut luu
		btnSave
		$('#btnSave').click(function() {
			$('#FormAddEditVocabulary').submit();
			//kiem tra xem co id khong. neu co -> update. khong co thi add
		});
		
		$("#select-lesson-list").bind( "change", function(event, ui) {
			lesson_id = $( "#select-lesson-list option:selected" ).val();
		});
		
		//validate form
		$("#FormAddEditVocabulary").validate({
            submitHandler: function(form) {
            	if(id){
            		updateVocabulary(id);
    			}else{
    				addVocabulary(lesson_id);
    			}
            }
        });
	});
</script>


<style type="text/css">
.ui-field-contain div.ui-slider-switch {
	width: 17em !important;
}

#FormAddEditVocabulary{
    border: none !important;
}


label.error {
    float: none; 
    color: red; 
    font-size: 16px;
    font-weight: normal;
    line-height: 1.4;
    width: 100%;
    display: block;
}
</style>



</head>

<body>
	<!-- Start  page -->
	<div data-role="page" id="add-vocabulary-page">

		<div id="minna-header" data-role="header" style="border: none;"
			data-theme="b" data-position="fixed">
			<h1>Thêm một từ</h1>
			<a href="#" id="btnBack"
				class="ui-btn ui-btn-left ui-mini ui-btn-inline ui-corner-all ui-btn-icon-left ui-icon-delete">Hủy
				bỏ</a>
			<button id="btnSave"
				class="ui-btn ui-btn-right ui-mini ui-btn-inline ui-corner-all ui-btn-icon-right btn-theme-b ui-icon-check">Lưu</button>
		</div>
		<!-- /header -->

		<!-- content -->


		<div id="minna-content" data-role="content" role="main">
				<!-- Form -->
				<form id="FormAddEditVocabulary"  class="validate">
					<ul data-role="listview" data-inset="true">
					<li class="ui-field-contain">
								<center><select name="flip2" id="typeAdd" data-role="slider">
								<option value="kanji">Kanji</option>
								<option value="katakana">Katakana</option>
						</select></center>
					</li>
					<li class="ui-field-contain">
					    <label for="name2">Bài học</label>
					    <select name="select-custom-1" id="select-lesson-list" data-native-menu="false">
				        </select> 
					</li>
					<li class="ui-field-contain">
					    <label id="label_word" for="name2">Kanji</label> 
					    <input type="text" name="word" id="word" value="" data-clear-btn="true" >
					</li>
					<li id="field-hiragana" class="ui-field-contain" style="display: block;">
					    <label id="label_hiragana" for="name2">Cách đọc (*)</label> 
					    <input type="text" id="hiragana" name="hiragana" value="" data-clear-btn="true" class="required" />
					</li>
					<li id="field-mean-kanji" class="ui-field-contain" style="display: block;">
					    <label id="label_mean_kanji" for="name2">Nghĩa Hán-Việt</label> 
					    <input type="text" name="name2" id="mean_kanji" value="" data-clear-btn="true" >
					</li>
					<li class="ui-field-contain">
					    <label for="name2">Nghĩa Thuần-Việt (*)</label> 
					    <input type="text" name="mean_vi" id="mean_vi" value="" data-clear-btn="true"  class="required" />
					</li>
					<li class="ui-field-contain">
					    <label  for="name2">Nghĩa Tiếng Anh</label> 
					    <input type="text" name="name2" id="mean_en" value="" data-clear-btn="true">
					</li>
					<li class="ui-field-contain">
					    <label for="name2">Cách nhớ</label> 
					    <textarea cols="40" rows="8" name="textarea2" id="remember"></textarea>
					</li>
					</ul>
				</form>
				<!-- /Form -->
		</div>
		<!-- /content -->
	</div>
	<!-- /page -->

</body>
</html>